<template>
  <div>
    <router-view></router-view>
    <div class="box">
      <p>个人中心</p>
      <!-- <img src="./项目/个人中心/个人中心头像.png" alt="" /> -->
      <img :src="fromData.userImage" alt="">
      <ul class="ul-a">
        {{fromData.userName}}
      </ul>
      <ul class="ul-b">
        LV1
      </ul>
      <ul class="ul-c">
        <li>000</li>
        <li>{{fromData.comment}}</li>
        <li>{{fromData.collect}}</li>
        <li>{{fromData.friends}}</li>
      </ul>
      <ul class="ul-d">
        <li>内容</li>
        <li>评论</li>
        <li>收藏</li>
        <li>好友</li>
      </ul>
    </div>
    <div class="box2">
      <ul class="ul-e">
        <li><img src="./项目/个人中心/个人成就.png" alt="" /></li>
        <li><img src="./项目/个人中心/物品背包.png" alt="" /></li>
        <li><img src="./项目/个人中心/任务中心.png" alt="" /></li>
        <li><img src="./项目/个人中心/消息通知.png" alt="" /></li>
      </ul>
    </div>
    <div class="box3">
      <ul class="ul-f">
        养宠功能
        <li><img src="./项目/个人中心/我的提问.png" alt="" /></li>
        <li><img src="./项目/个人中心/宠物日记.png" alt="" /></li>
        <li><img src="./项目/个人中心/养宠记账.png" alt="" /></li>
        <li @click="fun5"><img src="./项目/个人中心/定时提醒.png" alt="" /></li>
      </ul>
      <ul class="ul-g">
        <li @click="fun1"><img src="./项目/个人中心/知识百科.png" alt="" /></li>
        <li><img src="./项目/个人中心/宠物领养.png" alt="" /></li>
        <li @click="fun4"><img src="./项目/个人中心/寻宠启事.png" alt="" /></li>
        <li @click="fun3"><img src="./项目/个人中心/我的宠物.png" alt="" /></li>
      </ul>
    </div>
    <div class="box4">
      <ul class="ul-h">
        其他功能
        <li><img src="./项目/个人中心/服务订单.png" alt="" /></li>
        <li @click="fun2"><img src="./项目/个人中心/购物订单.png" alt="" /></li>
        <li><img src="./项目/个人中心/金币兑换.png" alt="" /></li>
        <li><img src="./项目/个人中心/我的活动.png" alt="" /></li>
      </ul>
      <ul class="ul-i">
        <li><img src="./项目/个人中心/我的收藏.png" alt="" /></li>
        <li><img src="./项目/个人中心/收获地址.png" alt="" /></li>
        <li><img src="./项目/个人中心/个人资料.png" alt="" /></li>
        <li><img src="./项目/个人中心/分享APp.png" alt="" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ref } from "vue";
import { useRouter } from "vue-router";
import { mine } from "@/api/mine";
export default {
  name: "IndexMine", //我的
  setup() {
    let router = useRouter();
    // let route = useRoute()

    function fun1() {
      router.push({
        name: "indexknowledge",
      });
    }

    function fun2() {
      router.push({
        name: "indexorders",
      });
    }

    function fun3() {
      router.push({
        name: "indexpet",
      });
    }

    function fun4() {
      router.push({
        name: "indexmissing",
      });
    }

    function fun5() {
      router.push({
        name: "indextiming",
      });
    }

    let fromData = ref({
      userName: "",
      userImage: "",
      comment: 0,
      collect: 0,
      friends: 0,
    });

    mine(sessionStorage.getItem('userId')).then((res) => {
        console.log(res);
        fromData.value = res
        console.log(fromData = res);
      })
      .catch(() => {});

    return {
      fun1,
      fun2,
      fun3,
      fun4,
      fun5,
      fromData,
    };
  },
};
</script>项目

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  border: 0.0625rem solid none;
  height: 10.375rem;
  text-align: center;
  background-color: rgb(185, 187, 223);
}
.box > p {
  font-size: 1.25rem;
  color: gray;
  font-weight: 500;
}
.box > img {
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  right: 9.375rem;
  top: 0.625rem;
}
.box > .ul-a {
  position: relative;
  bottom: 2.8125rem;
  right: 5.5rem;
  font-size: 1.15rem;
  color: rgb(122, 122, 122);
}
.box > .ul-b {
  position: absolute;
  border: 1px solid none;
  width: 3.125rem;
  height: 0.9375rem;
  background: white;
  border-radius: 0.625rem;
  top: 3.3125rem;
  text-align: center;
  left: 8.25rem;
  line-height: 0.9375rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.492);
}
.box > .ul-c {
  position: absolute;
  list-style: none;
  top: 5.625rem;
  left: .625rem;
}
.box > .ul-c > li {
  position: relative;
  font-size: 1.0625rem;
  font-weight: bold;
  float: left;
  margin-left: 2.875rem;
  left: 2.5rem;
  color: rgb(122, 122, 122);
}
.box > .ul-d {
  position: absolute;
  list-style: none;
  top: 7.875rem;
  left: 1.25rem;
}
.box > .ul-d > li {
  position: relative;
  font-size: 1.0625rem;
  float: left;
  margin-left: 1.7625rem;
  left: 2.5625rem;
  color: rgb(122, 122, 122);
}
.box2 {
  position: relative;
  border: 1px solid rgba(128, 128, 128, 0.585);
  width: 18.5rem;
  height: 6rem;
  border-radius: 0.625rem;
  bottom: 0.625rem;
  left: 2.5rem;
  background: white;
}
.box2 > .ul-e {
  list-style: none;
}
.box2 > .ul-e > li > img {
  position: relative;
  width: 3.325rem;
  height: 3.925rem;
  top: 1.25rem;
  right: 1.25rem;
  float: left;
  margin-left: 1.25rem;
}
.box3 {
  position: relative;
  border: 1px solid rgba(128, 128, 128, 0.585);
  width: 18.5rem;
  height: 10.675rem;
  border-radius: 0.625rem;
  top: 0.625rem;
  left: 2.5rem;
}
.box3 > .ul-f {
  position: relative;
  font-size: 0.9375rem;
  color: gray;
  left: 0.625rem;
  top: 0.625rem;
  list-style: none;
}
.box3 > .ul-f > li > img {
  position: relative;
  width: 3.325rem;
  height: 4.025rem;
  right: 1.25rem;
  float: left;
  margin-left: 1.25rem;
}
.box3 > .ul-g {
  position: relative;
  font-size: 0.9375rem;
  color: gray;
  left: 0.625rem;
  top: 0.625rem;
  list-style: none;
}
.box3 > .ul-g > li > img {
  position: relative;
  width: 3.225rem;
  height: 4.025rem;
  right: 1.25rem;
  float: left;
  margin-left: 1.25rem;
  top: 0.625rem;
}
.box4 {
  position: relative;
  border: 1px solid rgba(128, 128, 128, 0.585);
  width: 18.5rem;
  height: 10.675rem;
  border-radius: 0.625rem;
  top: 1.975rem;
  left: 2.5rem;
}
.box4 > .ul-h {
  position: relative;
  font-size: 0.9375rem;
  color: gray;
  left: 0.625rem;
  top: 0.625rem;
  list-style: none;
}
.box4 > .ul-h {
  position: relative;
  font-size: 0.9375rem;
  color: gray;
  left: 0.625rem;
  top: 0.625rem;
  list-style: none;
}
.box4 > .ul-h > li > img {
  position: relative;
  width: 3.325rem;
  height: 4.025rem;
  right: 1.25rem;
  float: left;
  margin-left: 1.25rem;
}
.box4 > .ul-i {
  position: relative;
  font-size: 0.9375rem;
  color: gray;
  left: 0.625rem;
  top: 0.625rem;
  list-style: none;
}
.box4 > .ul-i > li > img {
  position: relative;
  width: 3.225rem;
  height: 4.025rem;
  right: 1.25rem;
  float: left;
  margin-left: 1.25rem;
  top: 0.625rem;
}
</style>